<template>
    <div>
       <headNav :title="curClass.gradeName + curClass.name" ></headNav>
       <div class="title-p" @click="toggleTeacher">
           <div class="person-num">教师{{teacherList.length}}人</div>
           <div @click.stop="invitationClick(1)" class="invite">邀请教师</div>
           <img  class="arr-img" :class="{'close': !showTeacher}" src="@/assets/img/my/down-arr.png" alt="">
       </div>
       <div class="person-list" :style="{height: teacherListHeight}">
           <div v-for="(item,index) in teacherList" :key="index" class="person-item">
               <img class="head-img" v-if="item.portraitImgUrl" :src="item.portraitImgUrl" alt="">
               <img class="head-img" v-else src="@/assets/img/default_heads.png" alt="">
               <div class="person-info">
                   <label class="person-name">{{item.name}}</label>
                   <label class="person-phone">{{item.loginName}}</label>
                   <!-- <label class="person-phone">（班主任）</label> -->
               </div>
               
               <img v-if="curClass.isChargeTeacher && teacherId != item.id" 
               @click="deleteTeacher(item, index)" class="delete-img" src="@/assets/img/my/delete.png" alt="">
           </div>
       </div>
       <div class="title-p" @click="toggleParent">
           <div class="person-num">家长{{parentList.length}}人</div>
           <div @click.stop="invitationClick(2)" class="invite">邀请家长</div>
           <img  class="arr-img" :class="{'close': !showParent}" src="@/assets/img/my/down-arr.png" alt="">
       </div>
        <div class="person-list" :style="{height: parentListHeight}">
           <div v-for="(item,index) in parentList" :key="index" class="person-item">
               <img class="head-img" v-if="item.portraitImgUrl" :src="item.portraitImgUrl" alt="">
               <img class="head-img" v-else src="@/assets/img/default_heads.png" alt="">
               <div class="person-info">
                   <label class="person-name">{{item.name}}</label>
                   <label class="person-phone">{{item.loginName}}</label>
                    <!-- <label class="person-phone">（班主任）</label> -->
               </div>
               
               <!-- <img v-if="curClass.isChargeTeacher" @click="deleteParent(item)" class="delete-img" src="@/assets/img/my/delete.png" alt=""> -->
           </div>
        </div>


        <div v-if="!curClass.isChargeTeacher" class="bottom-space"></div>
        <div v-if="!curClass.isChargeTeacher" class="bottom-p">
            
            <!-- <div @click="dissolveClass" v-if="curClass.isChargeTeacher" class="bottom-btn">
                解散班级
            </div> -->
            <div @click="dissolveClass"  class="bottom-btn">
               
                退出班级
            </div>

        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav.vue'
import {teacherAndParent, quitClass, dissolveClass, updateSubjectByTeacher, getQRcodeUserApi, getInviteTeachersApi,} from '@/api/myNewApi'
export default {
    components: {
        headNav
    },

    computed: {
        curClass(){
            return this.$store.state.myInfo.curClass
        },
        teacherId () {
             return this.$store.state.user.teacherId
        },
        teacherListHeight () {
            if (this.showTeacher) {
                return (this.teacherList.length * 1.16) + 'rem'
            } else {
                return '0rem'
            }
        },
        parentListHeight () {
            if (this.showParent) {
                return (this.parentList.length * 1.16) + 'rem'
            } else {
                return '0rem'
            }
        }
    },

    data () {
        return {
            teacherList: [],
            parentList: [],

            showTeacher: false,
            showParent: false
        }
    },

    methods: {
        async teacherAndParent(){
            let res = await teacherAndParent(this.curClass.id)
            for (let item of res) {
                if (item.roleType == 0) {
                    this.teacherList.push(item)
                } else {
                    this.parentList.push(item)
                }
            }
        },
        toggleTeacher(){
            this.showTeacher = !this.showTeacher
        },
        toggleParent() {
            this.showParent = !this.showParent
        },
        // 邀请 按钮触发事件
        async invitationClick (num) {
            localStorage.shareClass = JSON.stringify(this.curClass)
            if (num == 1) {
                let val = await getInviteTeachersApi(this.curClass.qrCode)
                localStorage.pictureQRcode = JSON.stringify(val)
                console.log(val)
                localStorage.QRcodeNum = 1
            } else {
                let val = await getQRcodeUserApi(this.curClass.qrCode)
                localStorage.pictureQRcode = JSON.stringify(val)
                localStorage.QRcodeNum = 2
            }
            localStorage.numQRcode = this.curClass.qrCode
            this.$router.push('invitation')
        },

        confirm (text){
            return new Promise((resolve, reject) => {
                this.$vux.confirm.show({
                    title: '提示',
                    content: text,
                
                    onCancel () {
                        reject()
                    },
                    onConfirm () {
                        resolve()
                    }
                })
            })
        },
        async dissolveClass () {
           
            // quitClass, dissolveClass,
            if (this.curClass.isChargeTeacher) {
                 await this.confirm('您确定解散'+this.curClass.gradeName + this.curClass.name+'吗？')
                await dissolveClass({classId: this.curClass.id, teacherId: this.teacherId})
                this.$vux.toast.text('已解散班级', 'top')
            } else {
                 await this.confirm('您确定退出'+this.curClass.gradeName + this.curClass.name+'吗？')
                await quitClass({classId: this.curClass.id, teacherId: this.teacherId})
                this.$vux.toast.text('已退出班级', 'top')
            }

            this.$store.state.user.reloadToken = true
            this.$router.go(-1)
        },

        async deleteTeacher(item, index) {
             await this.confirm('您确定删除'+item.name+'吗？')
            
             await quitClass({classId: this.curClass.id, teacherId: item.id})

             this.teacherList.splice(index, 1)
             this.$vux.toast.text('已删除', 'top')
        },
        async deleteParent (item) {
             await this.confirm('您确定删除'+item.name+'吗？')
              console.log(item)
        }
    },

    mounted () {
        this.teacherAndParent()

        console.log(this.curClass)
    }
}
</script>
<style scoped>
.title-p{
    height: 1.02rem; box-sizing: border-box;
    padding: 0 0.32rem; position: relative;
}
.title-p::before{
    content: ''; display: inline-block; vertical-align: middle; height: 100%;
}
.person-num{
    font-size: 0.32rem; display: inline-block; vertical-align: middle;
    margin: 0 0.2rem 0 0;
}
.invite{
    display: inline-block; vertical-align: middle; width: 1.44rem; height: 0.5rem; line-height: 0.5rem;
    box-sizing: border-box;border-radius: 0.1rem; background: #fff; text-align: center;
    font-size: 0.24rem; color: #FF9900; border: 1px solid #FF9900;
}
.arr-img{
    display: inline-block; width: 0.27rem; height: 0.16rem;
    position: absolute; right: 0.57rem; top: 50%; transform: translateY(-50%);
    transition: 0.5s;
}
.arr-img.close{
    transform: rotateZ(180deg);
}
.person-list{
    padding: 0 0.32rem; background: #fff;
    transition: 0.5s; overflow-y: hidden;
}
.person-item{
    height: 1.16rem;
    position: relative; border-bottom: 1px solid #E5E5E5; 
    box-sizing: border-box;
}
.person-item::before{
   content: ''; display: inline-block; height: 100%; vertical-align: middle;
  
}
.person-name{
   
    font-size: 0.32rem; color: #333;
}
.person-phone{
  
    font-size: 0.28rem; color: #888888;
}
.delete-img{
    display: inline-block; vertical-align: middle;width: 0.32rem; height: 0.32rem;
    position: absolute; top: 50%; transform: translateY(-50%); right: 0rem;
    padding: 0.2rem;
}
.bottom-space{
    height: 1.5rem;
}
.bottom-p{
    position: fixed; left: 0; bottom: 0;
    width: 100%; height: 1.1rem; background: #fff;
    box-shadow: 0 0 0.3rem 0.06rem rgba(0,0,0,0.3);
}
.bottom-btn{
    width: 6.48rem; height: 0.8rem; line-height: 0.8rem; text-align: center;
    border-radius: 0.4rem; border:1px solid #49A8F0; color: #49A8F0;
    font-size: 0.3rem;
    margin: 0.15rem auto 0 auto;
}
.head-img{
    display: inline-block; vertical-align: middle; width: 0.6rem; height: 0.6rem;
    margin: 0 0.16rem 0 0;
    border-radius: 50%; object-fit: cover;
}
.person-info{
    display: inline-block; vertical-align: middle; 
    width: 5rem; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
</style>